<div *ngIf="!loading">
  <h1>
    <span *ngIf="isDeployed(stream)">Update</span>
    <span *ngIf="!isDeployed(stream)">Deploy</span>
    stream <strong>{{stream?.name}}</strong>
  </h1>
  <p style="margin-top: .6rem;margin-bottom: .6rem">
    Please specify any optional deployment properties. You can either use the builder.<br/>
    Alternatively, you can point to an external properties file containing the deployment properties. For more
    information
    please see the Technical Documentation.
  </p>


  <clr-tabs *ngIf="!loading && stream">
    <clr-tab>
      <button clrTabLink id="link1">Builder</button>
      <clr-tab-content id="content1" *clrIfActive="true">
        <app-stream-deploy-builder [properties]="properties"
                                   [id]="stream.name"
                                   [isDeployed]="isDeployed(stream)"
                                   (exportProperties)="runExport($event)"
                                   (update)="update($event)"
                                   (deploy)="runDeploy($event)"
                                   (copyProperties)="runCopy($event)">
        </app-stream-deploy-builder>
      </clr-tab-content>
    </clr-tab>
    <clr-tab>
      <button clrTabLink>Freetext</button>
      <clr-tab-content *clrIfActive>
        <app-stream-deploy-free-text [properties]="properties"
                                     [id]="stream.name"
                                     [isDeployed]="isDeployed(stream)"
                                     (exportProperties)="runExport($event)"
                                     (update)="update($event)"
                                     (deploy)="runDeploy($event)"
                                     (copyProperties)="runCopy($event)">
        </app-stream-deploy-free-text>
      </clr-tab-content>
    </clr-tab>
  </clr-tabs>

  <clr-modal [(clrModalOpen)]="isDeploying" *ngIf="stream" [clrModalClosable]="false">
    <h3 class="modal-title" *ngIf="isDeployed(stream)">Update stream</h3>
    <h3 class="modal-title" *ngIf="!isDeployed(stream)">Deploy stream</h3>
    <div class="modal-body" *ngIf="isDeploying">
      <clr-spinner clrInline clrSmall></clr-spinner>&nbsp;
      <span *ngIf="isDeployed(stream)">Updating stream ...</span>
      <span *ngIf="!isDeployed(stream)">Deploying stream(s) ...</span>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" [disabled]="true">Cancel</button>
    </div>
  </clr-modal>
</div>

<div *ngIf="loading">
  <clr-spinner clrInline clrSmall></clr-spinner>
  Loading data ...
</div>
